<template>
  <svg
    id="yichang"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="456"
    height="127"
    viewBox="0 0 456 127"
  >
    <defs>
      <linearGradient
        id="hy-linear-gradient"
        x1="432"
        y1="61.625"
        x2="2"
        y2="61.625"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#26cadd" />
        <stop offset="0.301" stop-color="#26a3ff" />
        <stop offset="0.624" stop-color="#26cadd" />
        <stop offset="0.994" stop-color="#26a3ff" />
        <stop offset="1" stop-color="#26a3ff" />
      </linearGradient>
      <linearGradient
        id="hy-linear-gradient-2"
        x1="432"
        y1="61.625"
        x2="2"
        y2="61.625"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#2b6bdc" />
        <stop offset="0.031" stop-color="#2b6bdc" />
        <stop offset="0.597" stop-color="#2bdcd2" />
        <stop offset="1" stop-color="#2b6bdc" />
      </linearGradient>
      <filter id="hy-filter" filterUnits="userSpaceOnUse">
        <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
        <feComposite result="composite" />
        <feComposite result="composite-2" />
        <feComposite result="composite-3" />
        <feFlood result="flood" flood-color="#f98800" flood-opacity="0.6" />
        <feComposite result="composite-4" operator="in" in2="composite-3" />
        <feBlend result="blend" in2="SourceGraphic" />
        <feBlend result="blend-2" in="SourceGraphic" />
      </filter>
      <filter
        id="hy-filter-2"
        x="67"
        y="-6"
        width="50"
        height="49"
        filterUnits="userSpaceOnUse"
      >
        <feGaussianBlur result="blur" stdDeviation="6.667" in="SourceAlpha" />
        <feComposite result="composite" />
        <feComposite result="composite-2" />
        <feComposite result="composite-3" />
        <feFlood result="flood" flood-color="#f98800" flood-opacity="0.6" />
        <feComposite result="composite-4" operator="in" in2="composite-3" />
        <feBlend result="blend" in2="SourceGraphic" />
        <feBlend result="blend-2" in="SourceGraphic" />
      </filter>
    </defs>
    <path
      id="curve_right"
      class="hy-cls-1"
      d="M2.006,86.083H31.461l3.006-9.664,4.208,13.288,4.208-10.268,3.006,6.644H73.541l4.208-10.872L83.76,103l7.871-82.748,10.163,71.876,3.607-6.644h11.421l3.607,13.892L124.637,72.8l5.41,20.536,3.006-7.852h46.888l4.208-15.7,6.011,28.388,5.41-19.932,4.208,7.248h37.815L241,76l4,14,5-11,3,6h27l4-11,6,29,10-69,8,57,3-6h13l3,14,4-27,6,20,2-7h46l6-16,5,29,7-20,4,7h25"
    />
    <path
      id="curve"
      class="hy-cls-2"
      d="M2.006,86.083H31.461l3.006-9.664,4.208,13.288,4.208-10.268,3.006,6.644H73.541l4.208-10.872L83.76,103l7.871-82.748,10.163,71.876,3.607-6.644h11.421l3.607,13.892L124.637,72.8l5.41,20.536,3.006-7.852h46.888l4.208-15.7,6.011,28.388,5.41-19.932,4.208,7.248h37.815L241,76l4,14,5-11,3,6h27l4-11,6,29,10-69,8,57,3-6h13l3,14,4-27,6,20,2-7h46l6-16,5,29,7-20,4,7h25"
    />
    <!-- <circle
      id="curve_d_2"
      class="hy-cls-3"
      cx="299.563"
      cy="34.734"
      r="4.813"
    />
    <ellipse
      id="curve_d_1"
      class="hy-cls-4"
      cx="91.578"
      cy="17.844"
      rx="4.828"
      ry="4.844"
    /> -->

    <template v-for="dot in dots" :key="dot.id">
      <circle class="hy-cls-3" cx="0" cy="0" :r="dot.value">
        <animateMotion
          :dur="dot.dur"
          repeatCount="indefinite"
          rotate="auto"
          :begin="dot.begin"
        >
          <mpath href="#curve"></mpath>
        </animateMotion>
      </circle>
    </template>
  </svg>
</template>

<script setup>
  const props = defineProps({
    dots: {
      type: Array,
      default: () => [],
    },
  })
</script>

<style scoped>
  .hy-cls-1,
  .hy-cls-2 {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
    fill-rule: evenodd;
  }

  .hy-cls-1 {
    opacity: 0.8;
    stroke: url(#hy-linear-gradient);
  }

  .hy-cls-2 {
    stroke: url(#hy-linear-gradient-2);
  }

  .hy-cls-3,
  .hy-cls-4 {
    fill: #f98800;
    /* 告诉浏览器该元素将改变那些属性，让浏览器提前做好优化的准备（比较销毁内存） */
    will-change: opacity;
  }

  .hy-cls-3 {
    filter: url(#hy-filter);
  }

  .hy-cls-4 {
    filter: url(#hy-filter-2);
  }
</style>
